<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <view class="app-icon">
          <image class="app-logo" src="/static/logo-tu@2x.png" mode="aspectFill" />
        </view>
        <view class="app-title">学情</view>
      </view>
    </view>

    <!-- 个人信息卡片 -->
    <view class="profile-section">
      <view class="avatar-circle">
        <image class="avatar-image" :src="userInfo.avatar" mode="aspectFit" />
      </view>
      <view class="profile-card">
        <view class="user-info">
          <text class="username">{{ userInfo.name }}</text>
          <view class="user-meta">
            <text class="meta-item">{{ userInfo.school }}</text>
            <text class="meta-divider">｜</text>
            <text class="meta-item">{{ userInfo.grade }}</text>
            <text class="meta-divider">｜</text>
            <text class="meta-item">{{ userInfo.class }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选工具栏 -->
    <view class="toolbar">
      <view class="filter-dropdown" @tap="toggleDropdown">
        <text class="filter-text">{{ filterLabel }}</text>
        <view class="dropdown-arrow">
          <image class="arrow-icon" src="/static/向下箭头图标.png" mode="aspectFit" />
        </view>
        
        <!-- 悬浮下拉菜单 -->
        <view v-if="showDropdown" class="dropdown-menu">
          <view 
            v-for="option in filterOptions" 
            :key="option.value" 
            class="dropdown-item"
            :class="{ active: currentFilter === option.value }"
            @tap="selectFilter(option.value, option.label)"
          >
            {{ option.label }}
          </view>
        </view>
      </view>
      
      <view class="search-box">
        <input 
          class="search-input" 
          v-model="searchKeyword"
          placeholder="请输入考试名称搜索"
          confirm-type="search"
          @confirm="handleSearch"
        />
        <view class="search-icon" @tap="handleSearch">
          <image class="search-icon-img" src="/static/searchIcon.png" mode="aspectFit" />
        </view>
      </view>
    </view>

    <!-- 学情列表 -->
    <view class="exam-list" v-if="examList.length">
      <view class="exam-wrapper">
        <view
          v-for="exam in waterfallColumns[0]"
          :key="exam.id"
          class="exam-card"
        >
          <view class="exam-icon">
            <image class="exam-icon-img" :src="exam.iconImg" mode="aspectFit" />
          </view>
          <view class="exam-content">
            <view class="exam-info">
              <text class="exam-title">{{ exam.title }}</text>
              <view class="exam-bottom">
                <view class="exam-time">
                  <text class="time-label">时间：</text>
                  <text class="time-value">{{ exam.date }}</text>
                </view>
                <view class="view-btn" @tap="handleViewExamDetail(exam)">
                  <text class="btn-text">查看学情</text>
                  <view class="btn-arrow">
                    <image class="btn-arrow-img" src="/static/btn-arrow.png" mode="aspectFit" />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="loading-footer" v-if="loadingState.loadingMore">
        <text>加载中...</text>
      </view>
    </view>
    <view class="empty-state" v-else>
      <text class="empty-text">无结果</text>
    </view>

    <!-- 过往成绩对比按钮 -->
    <view class="compare-section">
      <button class="compare-btn" @tap="goToScoreCompare">过往成绩对比</button>
    </view>


  </view>
</template>

<script setup>
import { getCurrentInstance, onMounted } from 'vue'
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { useLearningStatus } from '@/api/learningStatus.js'
import { useCheckingLearningStatusApi } from '@/api/checkLearningStatus.js'

const DEFAULT_COURSE_ID = 0

const { appContext } = getCurrentInstance() || {}
const globalProps = appContext?.app?.config?.globalProperties || {}

const checkingLearningStatusApi = useCheckingLearningStatusApi()

const learningStatus = useLearningStatus({
  api: globalProps.$api,
  userUtils: globalProps.$user
})

const {
  statusBarHeight,
  userInfo,
  showDropdown,
  currentFilter,
  searchKeyword,
  examList,
  waterfallColumns,
  loadingState,
  filterOptions,
  filterLabel,
  toggleDropdown,
  selectFilter,
  handleSearch,
  handlePullDownRefresh,
  goToScoreCompare,
  initPage,
  handleReachBottom,
  fetchUserInfo,
  viewExamDetail
} = learningStatus

const prefetchExamDetail = async (exam) => {
  try {
    const examId = exam?.raw?.exam_id
    const examType = exam?.raw?.type

    if (!examId) {
      console.warn('[prefetchExamDetail] examId缺失，跳过预请求')
      return
    }

    const requests = [
      checkingLearningStatusApi.getStudentAnalysis(examId),
      checkingLearningStatusApi.findStudentScoreInfo({ examId, courseId: DEFAULT_COURSE_ID }),
      examType !== undefined && examType !== null && `${examType}`.trim() !== ''
        ? checkingLearningStatusApi.findXDJPForAll({ examId, examType })
        : Promise.resolve(null)
    ]

    const [analysisRes, scoreInfoRes, xdjpRes] = await Promise.all(requests)
    console.log('学情详情-学生分析:', analysisRes)
    console.log('学情详情-成绩信息:', scoreInfoRes)
    console.log('学情详情-小董讲评:', xdjpRes)

    uni.setStorageSync('checkingLearningStatus:prefetched', {
      examId,
      examType,
      courseId: DEFAULT_COURSE_ID,
      analysisRes,
      scoreInfoRes,
      xdjpRes
    })
  } catch (error) {
    console.error('预请求学情详情数据失败:', error)
  }
}

const handleViewExamDetail = async (exam) => {
  await prefetchExamDetail(exam)

  const examId = exam?.raw?.exam_id
  const examType = exam?.raw?.type

  viewExamDetail({
    examId,
    examType,
    courseId: DEFAULT_COURSE_ID
  })
}

onMounted(() => {
  initPage()
})

onReachBottom(async () => {
  await handleReachBottom()
})

onPullDownRefresh(async () => {
  await handlePullDownRefresh()
})


</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  //height: 100rpx;
  background:
    linear-gradient( 180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 20%, rgba(255,255,255,1) 100%),
    linear-gradient( 270deg, #ACFB97 0%, rgba(52,207,185,0) 100%),
    linear-gradient( 270deg, rgba(95,141,227,0) 0%, #00C9FF 100%),
    linear-gradient( 114deg, #F0FFFD 0%, #FCFCFD 100%);
  position: relative;
}

.status-bar {
  width: 100%;
}

.custom-navbar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx 64rpx;
  position: relative;
}

.navbar-content {
  display: flex;
  align-items: center;
  font-family: FontName, FontName;
  font-weight: 400;
  font-size: 56rpx;
  color: #191E31;
  line-height: 64rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.app-icon {
  width: 64rpx;
  height: 64rpx;
  background: rgba(255,255,255,1);
  border-radius: 36rpx;
  border: 2rpx solid #FFFFFF;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-logo {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
}

.app-title {
  width: 112rpx;
  height: 64rpx;
  font-family: 腾讯体, 腾讯体;
  font-weight: 400;
  font-size: 56rpx;
  color: #191E31;
  line-height: 56rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.profile-icon {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle {
  width: 32rpx;
  height: 32rpx;
  border: 4rpx solid #333;
  border-radius: 50%;
}

.profile-section {
  width: 702rpx;
  height: 128rpx;
  background: linear-gradient(114deg, #F0FFFD 0%, #FCFCFD 100%);
  box-shadow: 
    0 0 0 4rpx rgba(65, 214, 240, 0.3),
    0 0 0 8rpx rgba(182, 243, 188, 0.2),
    0rpx 0rpx 12rpx 0rpx rgba(47,71,71,0.05);
  border-radius: 24rpx;
  position: relative;
  margin: 0rpx 24rpx 32rpx 24rpx;
}

.avatar-circle {
  background-color:white;
  position: absolute;
  left: 24rpx;
  bottom: 24rpx;
  width: 144rpx;
  height: 144rpx;
  border-radius: 72rpx;
  border: 4rpx solid #FFFFFF;
  box-shadow: 0 4rpx 16rpx rgba(56, 70, 77, 0.25);
  z-index: 10;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 72rpx;
}

.profile-card {
  justify-content: center;
  //background-clip: padding-box;
  //position: relative;
  display: flex;
  align-items: center;
  padding-left: 192rpx;
}

 /*.profile-card::before {
  content: '';
  position: absolute;
  top: -4rpx;
  left: -4rpx;
  right: -4rpx;
  bottom: -4rpx;
  background: linear-gradient(90deg, rgba(65, 214, 240, 1), rgba(182, 243, 188, 1));
  border-radius: 24rpx;
  z-index: -1;
}*/

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 14rpx;
}

.username {
  width: 380rpx;
  height: 48rpx;
  font-family: MiSans, MiSans;
  font-weight: 600;
  font-size: 36rpx;
  color: #3B3B3B;
  line-height: 48rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 12rpx;
}

.user-meta {
  display: flex;
  align-items: center;
  font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #68708A;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.meta-divider {
  color: #ccc;
  margin: 0 8rpx;
}

.toolbar {
  position: relative;
  padding: 0 48rpx;
  margin-bottom: 32rpx;
  height: 72rpx;
}

.filter-dropdown {
  position: absolute;
  top: 0;
  left: 24rpx;
  width: 128rpx;
  height: 72rpx;
  background: linear-gradient( 114deg, #F0FFFD 0%, #FCFCFD 100%);
  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(47,71,71,0.05);
  border: 4rpx solid transparent;
  background-clip: padding-box;
  border-radius: 16rpx;
  padding: 0 24rpx;
  display: flex;
  align-items: center;
}

.filter-dropdown::before {
  content: '';
  position: absolute;
  top: -4rpx;
  left: -4rpx;
  width: calc(100% + 8rpx);
  height: calc(100% + 8rpx);
  background: linear-gradient(114deg, rgba(240, 255, 253, 1), rgba(252, 252, 253, 1));
  border-radius: 16rpx;
  z-index: -1;
}

.filter-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #191E31;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.dropdown-arrow {
  position: absolute;
  top: 18rpx;
  right: 24rpx;
  width: 24rpx;
  height: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-icon {
  width: 100%;
  height: 100%;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  margin-top: 8rpx;
}

.dropdown-item {
  padding: 24rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item.active {
  color: #00D4FF;
  background: rgba(0, 212, 255, 0.1);
}

.search-box {
  position: absolute;
  right: 24rpx;
  top: 0rpx;
  width: 460rpx;
  height: 72rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(47,71,71,0.05);
  border: 4rpx solid transparent;
  background-clip: padding-box;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}

.search-box::before {
  content: '';
  position: absolute;
  top: -4rpx;
  left: -4rpx;
  width: calc(100% + 8rpx);
  height: calc(100% + 8rpx);
  background: linear-gradient(114deg, rgba(240, 255, 253, 1), rgba(252, 252, 253, 1));
  border-radius: 16rpx;
  z-index: -1;
}

.search-input {
  flex: 1;
  height: 48rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #9AA5B8;
  line-height: 48rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.search-icon {
  position: absolute;
  top: 20rpx;
  right: 32rpx;
  width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icon-img {
  width: 100%;
  height: 100%;
}



.exam-list {
  display: flex;
  justify-content: center;
  padding: 0 48rpx;
  margin-bottom: 40rpx;
}

.exam-wrapper {
  width: 702rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.exam-card {
  background: linear-gradient(114deg, #F0FFFD 0%, #FCFCFD 100%);
  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(47,71,71,0.05);
  border-radius: 24rpx;
  border: 4rpx solid white;
  padding: 24rpx;
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
}

.exam-icon {
  width: 144rpx;
  height: 144rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.exam-icon-img {
  width: 100%;
  height: 100%;
}


.exam-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120rpx;
}

.exam-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.exam-title {
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #191E31;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  display: block;
  width: 486rpx;
  height: 80rpx;
}

.exam-time {
  display: flex;
  align-items: flex-end;
  flex: 1;
  height: 100%;
}

.time-label {
  width: 72rpx;
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #9AA5B8;
  line-height: 40rpx;
  text-align: left;
}

.time-value {
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #191E31;
  line-height: 40rpx;
  text-align: left;
}


.exam-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -8rpx;
}


.view-btn {
  width: 136rpx;
  height: 40rpx;
  background: #E9FFF9;
  border-radius: 56rpx;
  padding: 12rpx 24rpx;
  display: flex;
  align-items: center;
}

.btn-text {
  width: 112rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #0ED1AD;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.btn-arrow {
  width: 24rpx;
  height: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-text {
  font-size: 26rpx;
  color: #9AA5B8;
}

.compare-section {
  display: flex;
  justify-content: center;
  margin-top: 24rpx;
  margin-bottom: 40rpx;
}

.compare-btn {
  width: 702rpx;
  height: 96rpx;
  background: #0ED1AD;
  border-radius: 16rpx;
  border: none;
  font-family: MiSans, MiSans;
  color: #ffffff;
  line-height: 48rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}


</style>